<h2>{{defaultConfig.name}}</h2>
<ng-container [ngSwitch]="editmode">
  <ng-template ngSwitchCase="list">
    <test-modal #viewModal titleName='InfluxDB Servers'></test-modal>
    <test-modal #viewModalDelete titleName='Deleting:' [customMessage]="['Deleting this InfluxDB Server will affect the following components','Deleting this InfluxDB Server will NOT affect any component. Safe delete']" [customMessageClass]="['alert alert-danger','alert alert-success']"
        [showValidation]="true" [textValidation]="'Delete'" [controlSize]="true" (validationClicked)="deleteInfluxServer($event)">
    </test-modal>
    <export-file-modal #exportFileModal [showValidation]="true" [exportType]="defaultConfig['slug']" [textValidation]="'Export'" titleName='Exporting:'></export-file-modal>
    <table-list #listTableComponent [typeComponent]="defaultConfig['slug']" [data]="data" [columns]="defaultConfig['table-columns']" [counterItems]="counterItems" [counterErrors]="counterErrors" [selectedArray]="selectedArray" [isRequesting]="isRequesting" [tableRole]="tableRole"
    [sanitizeCell]="cellParser" [roleActions]="overrideRoleActions" (customClicked)="customActions($event)"></table-list>
  </ng-template>
  <ng-template ngSwitchDefault>
    <form [formGroup]="influxserverForm" class="form-horizontal" (ngSubmit)="editmode === 'create' ? saveInfluxServer() : updateInfluxServer()">
      <ng-container>
        <div class="row well well-sm">
          <h4 style="display:inline">
          <i class="glyphicon glyphicon-cog text-info"></i> {{ editmode | uppercase}}
        </h4>
        <div class="pull-right" style="margin-right: 20px">
          <div style="display:inline" tooltip='Test Connection' container=body><button class="btn btn-info" type="button" (click)="testInfluxServerConnection()" [disabled]="!influxserverForm.valid"> <i class="glyphicon glyphicon-flash"></i></button></div>
          <div style="display:inline" tooltip='Submit' container=body><button class="btn btn-success" type="submit" [disabled]="!influxserverForm.valid"> <i class="glyphicon glyphicon-ok-circle"></i></button></div>
          <div style="display:inline" tooltip='Reset' container=body><button class="btn btn-warning" type="reset" [disabled]="!influxserverForm.dirty"><i class="glyphicon glyphicon-ban-circle"></i> </button></div>
          <div style="display:inline" tooltip='Cancel' container=body><button class="btn btn-danger" type="button" (click)="cancelEdit()"><i class="glyphicon glyphicon-remove-circle"></i></button></div>
        </div>
      </div>
    </ng-container>
    <div class="form-fixed-height">
    <div class="well well-sm">
      <span class="editsection">
        Server Settings
      </span>
      <div class="form-group" style="margin-top: 25px">
        <label class="control-label col-sm-2" for="ID">ID</label>
        <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Unique identifier of InfluxDB server"></i>
        <div class="col-sm-9">
          <input formControlName="ID" id="ID" [ngModel]="influxserverForm.value.ID"/>
          <control-messages [control]="influxserverForm.controls.ID"></control-messages>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="Host">Host</label>
        <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Address of InfluxServer"></i>
        <div class="col-sm-9">
          <input formControlName="Host" id="Host" placeholder="127.0.0.1 or localhost" [ngModel]="influxserverForm.value.Host" />
          <control-messages [control]="influxserverForm.controls.Host"></control-messages>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="Port">Port</label>
        <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Connection port to InfluxDB server {{influxserverForm.value.Host}}"></i>
        <div class="col-sm-9">
          <input formControlName="Port" id="Port" [ngModel]="influxserverForm.value.Port"/>
          <control-messages [control]="influxserverForm.controls.Port"></control-messages>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="Timeout">Timeout</label>
        <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Time in seconds that client will wait to a complete write transaction to be completed"></i>
        <div class="col-sm-9">
          <input formControlName="Timeout" id="Timeout" [ngModel]="influxserverForm.value.Timeout"/>
          <control-messages [control]="influxserverForm.controls.Timeout"></control-messages>
        </div>
      </div>
      <div class="form-group">
      <div *ngIf="alertHandler" class="col-md-offset-2 col-sm-5" >
        <div [ngClass]="['panel-body', 'bg-'+alertHandler.type,'text-'+alertHandler.type]">
          <span>{{alertHandler.result}} - Ping elapsed: {{alertHandler.elapsed / 1000000 }} ms</span>
          <p>{{alertHandler.msg}}</p>
        </div>
      </div>
    </div>
    </div>
    <div class="well well-sm">
      <span class="editsection">Database Settings</span>
      <div class="form-group" style="margin-top: 25px">
        <label class="control-label col-sm-2" for="DB">DB</label>
        <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="InfluxDB Database name"></i>
        <div class="col-sm-9">
          <input formControlName="DB" id="DB" [ngModel]="influxserverForm.value.DB"/>
          <control-messages [control]="influxserverForm.controls.DB"></control-messages>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="User">User</label>
        <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Authentification user to the DB"></i>
        <div class="col-sm-9">
          <input formControlName="User" id="User"  [ngModel]="influxserverForm.value.User"/>
          <control-messages [control]="influxserverForm.controls.User"></control-messages>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="Password">Password</label>
        <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Authentification password to the DB of the user {{influxserverForm.value.User}}"></i>
        <div class="col-sm-9">
          <input #inputPassword formControlName="Password" id="Password" type="password"  [ngModel]="influxserverForm.value.Password"/>
          <i style="margin-left:-25px; margin-right:6px" [ngClass]="inputPassword.type === 'password' ? ['glyphicon glyphicon-eye-open text-primary'] : ['glyphicon glyphicon-eye-close text-primary']" passwordToggle [input]="inputPassword"> </i>
          <control-messages [control]="influxserverForm.controls.Password"></control-messages>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="Retention">Retention Policy</label>
        <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Retention policy name to write on. RP must exist on the DB {{influxserverForm.value.DB}}"></i>
        <div class="col-sm-9">
          <input formControlName="Retention" id="Retention" [ngModel]="influxserverForm.value.Retention" />
          <control-messages [control]="influxserverForm.controls.Retention"></control-messages>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="Precision">Timestamp Precision</label>
        <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Sets the precision for the supplied Unix time values (valid values are [ns,u,ms,s,m,h] ). SNMP are a slow gather protocol so default snmpcollector precision are in seconds"></i>
        <div class="col-sm-9">
          <select formControlName="Precision" id="Precision" [ngModel]="influxserverForm.value.Precision">
            <option value="h">h (hour)</option>
            <option value="m">m (minute)</option>
            <option default value="s">s (second)</option>
            <option value="ms">ms (millisecond)</option>
            <option value="u">u (microsecond)</option>
            <option value="ns">ns (nanosecond)</option>
          </select>
          <control-messages [control]="influxserverForm.controls.Precision"></control-messages>
        </div>
      </div>
  </div>
  <div class="well well-sm">
    <span class="editsection">SSL Settings</span>
    <div class="form-group" style="margin-top: 25px">
      <label class="control-label col-sm-2" for="EnableSSL">Enable SSL</label>
      <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Enable or disables SSL "></i>
      <div class="col-sm-9">
        <select formControlName="EnableSSL" id="EnableSSL" [ngModel]="influxserverForm.value.EnableSSL">
          <option value="true">True</option>
          <option value="false">False</option>
          </select>
        <control-messages [control]="influxserverForm.controls.EnableSSL"></control-messages>
      </div>
    </div>
    <div class="form-group" style="margin-top: 25px" *ngIf="influxserverForm.controls.EnableSSL">
      <label class="control-label col-sm-2" for="SSLCA">SSL CA</label>
      <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Complete Path (on the collector host side) for the CA.PEM file "></i>
      <div class="col-sm-9">
        <input formControlName="SSLCA" id="SSLCA" [ngModel]="influxserverForm.value.SSLCA"/>
        <control-messages [control]="influxserverForm.controls.SSLCA"></control-messages>
      </div>
    </div>
    <div class="form-group" style="margin-top: 25px" *ngIf="influxserverForm.controls.EnableSSL">
      <label class="control-label col-sm-2" for="SSLCert">SSL Cert</label>
      <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Complete Path (on the collector host side) for the Cert.PEM file "></i>
      <div class="col-sm-9">
        <input formControlName="SSLCert" id="SSLCert" [ngModel]="influxserverForm.value.SSLCert"/>
        <control-messages [control]="influxserverForm.controls.SSLCert"></control-messages>
      </div>
    </div>
    <div class="form-group" style="margin-top: 25px" *ngIf="influxserverForm.controls.EnableSSL">
      <label class="control-label col-sm-2" for="SSLKey">SSL Key</label>
      <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Complete Path (on the collector host side) for the Key.PEM file "></i>
      <div class="col-sm-9">
        <input formControlName="SSLKey" id="SSLKey" [ngModel]="influxserverForm.value.SSLKey"/>
        <control-messages [control]="influxserverForm.controls.SSLKey"></control-messages>
      </div>
    </div>
    <div class="form-group" style="margin-top: 25px" *ngIf="influxserverForm.controls.EnableSSL">
      <label class="control-label col-sm-2" for="InsecureSkipVerify">Insecure Skip Verify</label>
      <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip=" If InsecureSkipVerify is true, TLS accepts any certificate presented by the server and any host name in that certificate. In this mode, TLS is susceptible to man-in-the-middle attacks. This should be used only for testing."></i>
      <div class="col-sm-9">
          <select formControlName="InsecureSkipVerify" id="InsecureSkipVerify" [ngModel]="influxserverForm.value.InsecureSkipVerify">
            <option value="true">True</option>
            <option value="false">False</option>
          </select>
        <control-messages [control]="influxserverForm.controls.InsecureSkipVerify"></control-messages>
      </div>
    </div>
  </div>
  <div class="well well-sm">
    <span class="editsection">Extra Settings</span>
      <div class="form-group" style="margin-top: 25px">
        <label class="control-label col-sm-2" for="UserAgent">User Agent</label>
        <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="UserAgent is the http User Agent, defaults to &quot;InfluxDBClient&quot; (useful for debugin data write in the server site)"></i>
        <div class="col-sm-9">
          <input formControlName="UserAgent" id="UserAgent" [ngModel]="influxserverForm.value.UserAgent"/>
          <control-messages [control]="influxserverForm.controls.UserAgent"></control-messages>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="BufferSize">Buffer Size</label>
        <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Maximum number of Data Points SnmpCollector will enqueue waitting to send to the data backend (once the buffer will be full points will be descarted ie =>data loss)"></i>
        <div class="col-sm-9">
          <input formControlName="BufferSize" id="BufferSize" [ngModel]="influxserverForm.value.BufferSize"/>
          <control-messages [control]="influxserverForm.controls.BufferSize"></control-messages>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="Description">Description</label>
        <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Description of the InfluxDB Server"></i>
        <div class="col-sm-9">
          <textarea class="form-control" style="width: 50%" rows="2" formControlName="Description" id="Description" [ngModel]="influxserverForm.value.Description"> </textarea>
          <control-messages [control]="influxserverForm.controls.Description"></control-messages>
        </div>
      </div>
    </div>
  </div>
</form>
  </ng-template>
</ng-container>
